<template>
    <div class="left">
        <div class="top">
            <dv-border-box-11 title="大厅办件情况分析" :color="['#071334', '#0c698f']">
                <div style="padding:20px;display: flex;justify-content: space-between;">
                    <div class="leftbox">
                        <div class="secondTitle">办事总览</div>
                        <div class="content">
                            <div v-for="item in firstBoxContent" :key="item.title" class="item">
                                <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
                                    <div class="itemContent">
                                        <span class="yellow">{{ item.value }}</span>
                                        <span>{{ item.title }}</span>
                                    </div>
                                </dv-border-box-7>
                            </div>
                        </div>
                    </div>
                    <div class="rightbox">
                        <div class="secondTitle">办事部门TOPS</div>
                        <div class="bar-chart-container">
                            <div v-for="item in data" :key="item.name" class="bar-item">
                                <!-- 图标 + 部门名称 -->
                                <div class="item-label">
                                    <span class="item-name">{{ item.name }}</span>
                                    <div class="item-value">{{ item.value }} 件</div>
                                </div>
                                <!-- 进度条容器 -->
                                <div class="bar-wrapper">
                                    <div class="bar-progress" :style="{
                                        width: `${(item.value / maxValue) * 100}%`,
                                        // width: `200px`,
                                        height: '10px',
                                        backgroundColor: item.name === '部门名称A' ? '#FFC107' : '#42A5F5'
                                    }"></div>
                                    <div class="bar-bg"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </dv-border-box-11>
        </div>
        <div class="center">
            <dv-border-box-11 title="各时段人流量分析" :color="['#071334', '#0c698f']">
                <div style="padding:20px;">
                    <!-- 折线图 -->
                    <div class="chartBox">
                        <div id="chart" style="width: 100%; height: 210px;"></div>
                    </div>
                </div>
            </dv-border-box-11>
        </div>
        <div class="bottom">
            <dv-border-box-11 title="重点企业行业分布情况" :color="['#071334', '#0c698f']">
                <div style="padding:20px;">
                    <!-- 饼图 -->
                    <div class="chartBox">
                        <div id="pieChart" style="width: 100%; height: 190px;"></div>
                    </div>

                </div>
            </dv-border-box-11>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const firstBoxContent = [
    {
        title: '当天取号量',
        value: '399'
    },
    {
        title: '当前等待量',
        value: '29'
    },
    {
        title: '正在受理量',
        value: '30'
    },
    {
        title: '当天办理量',
        value: '50'
    },
    {
        title: '当天总满意量',
        value: '45'
    },
    {
        title: '年度总办件量',
        value: '9999'

    }
]
const data = [
    { name: '部门名称A', value: 200, iconClass: 'icon-star' },
    { name: '部门名称B', value: 170, iconClass: 'icon-rocket' },
    { name: '部门名称C', value: 164, iconClass: 'icon-medal' },
    { name: '部门名称D', value: 154, iconClass: 'icon-badge' },
    { name: '部门名称E', value: 143, iconClass: 'icon-shield' },
]
const maxValue = ref(250);
onMounted(() => {
    // 第一个折线图
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },

            axisLabel: {
                color: 'white'
            },
            // 去除刻度线
            axisTick: {
                show: false
            }

        },
        yAxis: {
            type: 'value',
            nameTextStyle: {
                color: '#80c0e0' // 单位颜色
            },
            // 坐标轴范围
            min: 0,
            max: 250,
            // 坐标轴线条颜色
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
            splitLine: {
                lineStyle: {
                    color: '#0d82a9',
                    type: "solid"
                }
            },
            // 去除刻度线
            axisTick: {
                show: false
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },

        series: [
            {
                data: [0, 50, 80, 220, 125, 150, 200, 125, 50, 25, 0],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#27acd6',
                    width: 2
                },
                symbol: 'none',
                // 去除填充区域
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#0d7ca2'
                        },
                        {
                            offset: 1,
                            color: '#103557'
                        }
                    ])
                },

            }
        ]
    };
    option && myChart.setOption(option);

    // 第一个饼图
    var pieChartDom = document.getElementById('pieChart');
    var myChart = echarts.init(pieChartDom);
    var pieOption;
    pieOption = {
        legend: {
            left: '10%',          // 图例居左
            top: 'center',        // 垂直居中
            orient: 'vertical',   // 垂直排列
            textStyle: {
                color: '#ffffff'   // 白色文字，适配深色背景
            }
        },
        toolbox: {
            show: false           // 隐藏工具盒节省空间
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: ['20%', '80%'],
                center: ['65%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 40, name: '企业行业1' },
                    { value: 28, name: '企业行业2' },
                    { value: 32, name: '企业行业3' },
                    { value: 30, name: '企业行业4' },
                    { value: 38, name: '企业行业5' },
                    { value: 26, name: '企业行业6' },
                    { value: 22, name: '企业行业7' }
                ]
            }
        ]
    };

    pieOption && myChart.setOption(pieOption);
})


</script>

<style lang="scss" scoped>
.left {
    padding: 10px;
    width: 100%;

    .top {
        // width:100%;
        width: 530px;
        background-color: #070f2c;

        span {
            font-size: 19px;
        }

        .secondTitle {
            font-size: 16px;
            padding-left: 15px;
            border-left: 8px solid #ffc700;
            margin: 46px 5px 10px;
        }

        .leftbox {
            width: 48%;

            .content {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .item {
                    width: 49%;
                    height: 70px;
                    background-color: #04091c;
                    margin: 5px 0;

                    .itemContent {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        gap: 8px;

                        span {
                            font-size: 16px;
                        }
                        

                        .yellow {
                            color: #ffc700;
                            font-size: 18px;
                            font-weight: bold;
                        }

                    }

                }
            }
        }

        .rightbox {
            width: 48%;
        }

        .bar-chart-container {
            height: 240px;
            padding: 20px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .item-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .item-name {
            font-size: 14px;
        }

        .bar-wrapper {
            width: 100%;
            flex: 1;
            height: 12px;
            background-color: #607D8B;
            border-radius: 6px;
            overflow: hidden;
            margin: 0 10px;
        }

        .bar-progress {
            height: 100%;
            border-radius: 6px;
            transition: width 0.3s ease;
        }

        .item-value {
            font-size: 14px;
        }

    }

    .bottom {
        height: 260px;
    }

    .center,
    .bottom {
        width: 530px;
        background-color: #070f2c;
        margin-top: 15px;

        span {
            font-size: 19px;
        }

        .chartBox {
            margin-top: 40px;
            margin-bottom: -10px;
        }
    }
}
</style>